<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 智慧农业信息管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body { background-color: #f5f7fa; }
        .navbar { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .sidebar {
            min-height: calc(100vh - 56px);
            background: white;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            padding-top: 20px;
        }
        .sidebar .nav-link {
            color: #333;
            padding: 12px 20px;
            border-left: 3px solid transparent;
            transition: all 0.3s;
        }
        .sidebar .nav-link:hover { background-color: #f8f9fa; border-left-color: #667eea; color: #667eea; }
        .sidebar .nav-link.active { background-color: #e7f1ff; border-left-color: #667eea; color: #667eea; }
        
        /* 统计卡片动画 */
        .stat-card {
            border-radius: 15px;
            padding: 25px;
            color: white;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .stat-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255,255,255,0.1);
            transform: rotate(45deg);
            transition: all 0.5s;
        }
        .stat-card:hover::before {
            top: -100%;
            right: -100%;
        }
        .stat-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }
        .stat-card.blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .stat-card.green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
        .stat-card.orange { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
        .stat-card.purple { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
        .stat-card .icon {
            font-size: 3rem;
            opacity: 0.8;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        .stat-card h3 {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 15px 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }
        
        /* 新闻卡片 */
        .news-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            border-left: 4px solid #667eea;
            transition: all 0.3s;
        }
        .news-card:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        /* 欢迎横幅 */
        .welcome-banner {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 15px;
            padding: 30px;
            color: white;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        .welcome-banner h2 {
            font-size: 2rem;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .welcome-banner p {
            font-size: 1.1rem;
            opacity: 0.9;
            margin: 0;
        }
        
        /* 快捷入口 */
        .quick-entry {
            background: white;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .quick-entry:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }
        .quick-entry i {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: #667eea;
        }
        
        /* 活动数据区域 */
        .activity-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }
        .activity-item {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            transition: background 0.3s;
        }
        .activity-item:last-child { border-bottom: none; }
        .activity-item:hover { background: #f8f9fa; border-radius: 8px; }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/index">🌾 智慧农业管理系统</a>
            <div class="navbar-nav ms-auto">
                <span class="navbar-text text-white me-3">
                    欢迎，<span th:text="${currentUser.realName}"></span>
                    (<span th:text="${currentUser.role == 'admin' ? '管理员' : (currentUser.role == 'manager' ? '生产管理员' : '游客')}"></span>)
                </span>
                <a class="btn btn-outline-light btn-sm" href="/logout">退出登录</a>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <nav class="col-md-2 d-md-block sidebar">
                <div class="position-sticky pt-3">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" href="/index">
                                <i class="fas fa-home me-2"></i> 首页
                            </a>
                        </li>
                        <li class="nav-item" th:if="${currentUser.role == 'admin'}">
                            <a class="nav-link" href="/user/list">
                                <i class="fas fa-users me-2"></i> 用户管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/field/list">
                                <i class="fas fa-map me-2"></i> 地块管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/crop/list">
                                <i class="fas fa-seedling me-2"></i> 作物管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/material/list">
                                <i class="fas fa-boxes me-2"></i> 农资管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/plan/list">
                                <i class="fas fa-calendar-alt me-2"></i> 种植计划
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/farming/list">
                                <i class="fas fa-tractor me-2"></i> 农事记录
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/monitor/list">
                                <i class="fas fa-chart-line me-2"></i> 生长监测
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/product/list">
                                <i class="fas fa-shopping-basket me-2"></i> 产品库存
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/sales/list">
                                <i class="fas fa-dollar-sign me-2"></i> 销售记录
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/statistics/dashboard">
                                <i class="fas fa-chart-bar me-2"></i> 数据统计
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/news/list">
                                <i class="fas fa-newspaper me-2"></i> 新闻管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/news/index">
                                <i class="fas fa-bullhorn me-2"></i> 公告浏览
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- 主内容区 -->
            <main class="col-md-10 ms-sm-auto px-md-4">
                <!-- 欢迎横幅 -->
                <div class="welcome-banner mt-3">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h2>👋 欢迎回来，<span th:text="${currentUser.realName}">用户</span>！</h2>
                            <p><i class="far fa-calendar me-2"></i>今天是美好的一天，让我们开始高效的农业管理吧！</p>
                        </div>
                        <div class="col-md-4 text-end">
                            <i class="fas fa-sun fa-3x" style="opacity: 0.8;"></i>
                        </div>
                    </div>
                </div>

                <!-- 统计卡片 -->
                <div class="row">
                    <div class="col-md-3">
                        <div class="stat-card blue" onclick="location.href='/field/list'">
                            <div class="icon"><i class="fas fa-map"></i></div>
                            <h3 th:text="${statistics.totalFields}">0</h3>
                            <p><i class="fas fa-chart-area me-2"></i>地块总数</p>
                            <small><i class="fas fa-check-circle me-1"></i>使用中: <span th:text="${statistics.usedFields}">0</span></small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card green" onclick="location.href='/plan/list'">
                            <div class="icon"><i class="fas fa-calendar-check"></i></div>
                            <h3 th:text="${statistics.totalPlans}">0</h3>
                            <p><i class="fas fa-tasks me-2"></i>种植计划</p>
                            <small><i class="fas fa-play-circle me-1"></i>执行中: <span th:text="${statistics.executingPlans}">0</span></small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card orange" onclick="location.href='/product/list'">
                            <div class="icon"><i class="fas fa-shopping-basket"></i></div>
                            <h3 th:text="${#numbers.formatDecimal(statistics.totalStock, 0, 0)}">0</h3>
                            <p><i class="fas fa-weight me-2"></i>库存总量(斤)</p>
                            <small><i class="fas fa-boxes me-1"></i>产品: <span th:text="${statistics.totalProducts}">0</span>种</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card purple" onclick="location.href='/sales/list'">
                            <div class="icon"><i class="fas fa-dollar-sign"></i></div>
                            <h3>¥<span th:text="${#numbers.formatDecimal(statistics.monthSales, 0, 0)}">0</span></h3>
                            <p><i class="fas fa-money-bill-wave me-2"></i>本月销售额</p>
                            <small><i class="fas fa-coins me-1"></i>成本: ¥<span th:text="${#numbers.formatDecimal(statistics.monthCost, 0, 0)}">0</span></small>
                        </div>
                    </div>
                </div>

                <!-- 快捷入口 -->
                <div class="row mt-4">
                    <div class="col-md-12">
                        <h4 class="mb-3"><i class="fas fa-th-large me-2"></i>快捷入口</h4>
                    </div>
                    <div class="col-md-2">
                        <div class="quick-entry" onclick="location.href='/plan/list'">
                            <i class="fas fa-seedling"></i>
                            <h6>新增种植计划</h6>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="quick-entry" onclick="location.href='/farming/list'">
                            <i class="fas fa-tractor"></i>
                            <h6>记录农事活动</h6>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="quick-entry" onclick="location.href='/monitor/list'">
                            <i class="fas fa-chart-line"></i>
                            <h6>生长监测</h6>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="quick-entry" onclick="location.href='/product/list'">
                            <i class="fas fa-warehouse"></i>
                            <h6>产品入库</h6>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="quick-entry" onclick="location.href='/sales/list'">
                            <i class="fas fa-cash-register"></i>
                            <h6>销售记录</h6>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="quick-entry" onclick="location.href='/statistics/dashboard'">
                            <i class="fas fa-chart-pie"></i>
                            <h6>数据分析</h6>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <!-- 最新公告 -->
                    <div class="col-md-6">
                        <div class="activity-card">
                            <h5 class="mb-3"><i class="fas fa-bullhorn me-2 text-primary"></i>📢 最新公告</h5>
                            <div th:if="${topNews != null and !topNews.isEmpty()}">
                                <div class="activity-item" th:each="news : ${topNews}">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1" th:text="${news.title}">公告标题</h6>
                                            <p class="text-muted small mb-1" th:text="${news.content.length() > 60 ? news.content.substring(0, 60) + '...' : news.content}">公告内容</p>
                                            <small class="text-muted">
                                                <i class="far fa-clock me-1"></i>
                                                <span th:text="${#temporals.format(news.publishTime, 'MM-dd HH:mm')}"></span>
                                            </small>
                                        </div>
                                        <a th:href="@{/news/detail/{id}(id=${news.id})}" class="btn btn-sm btn-outline-primary ms-2">查看</a>
                                    </div>
                                </div>
                            </div>
                            <div th:if="${topNews == null or topNews.isEmpty()}" class="text-center text-muted py-4">
                                <i class="fas fa-inbox fa-2x mb-2"></i>
                                <p>暂无公告信息</p>
                            </div>
                        </div>
                    </div>

                    <!-- 最近活动 -->
                    <div class="col-md-6">
                        <div class="activity-card">
                            <h5 class="mb-3"><i class="fas fa-clock me-2 text-success"></i>🕐 最近活动</h5>
                            <div class="activity-item">
                                <div class="d-flex align-items-center">
                                    <div class="icon-box bg-success bg-opacity-10 text-success rounded-circle p-2 me-3">
                                        <i class="fas fa-seedling"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h6 class="mb-0">春季播种计划</h6>
                                        <small class="text-muted">东区一号田开始播种</small>
                                    </div>
                                    <span class="badge bg-success">进行中</span>
                                </div>
                            </div>
                            <div class="activity-item">
                                <div class="d-flex align-items-center">
                                    <div class="icon-box bg-primary bg-opacity-10 text-primary rounded-circle p-2 me-3">
                                        <i class="fas fa-shopping-basket"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h6 class="mb-0">新产品入库</h6>
                                        <small class="text-muted">优质大米 500斤</small>
                                    </div>
                                    <span class="badge bg-primary">已完成</span>
                                </div>
                            </div>
                            <div class="activity-item">
                                <div class="d-flex align-items-center">
                                    <div class="icon-box bg-warning bg-opacity-10 text-warning rounded-circle p-2 me-3">
                                        <i class="fas fa-chart-line"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h6 class="mb-0">生长监测</h6>
                                        <small class="text-muted">水稻长势良好</small>
                                    </div>
                                    <span class="badge bg-warning">今天</span>
                                </div>
                            </div>
                            <div class="text-center mt-3">
                                <a href="/farming/list" class="btn btn-sm btn-outline-secondary">查看更多 <i class="fas fa-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

